// Modal styles

.modal {
  background-color: rgba(0, 0, 0, .5);

  .dialog {
    background-color: white;
    border-radius: @border-radius;
    box-shadow: 20px 20px 40px 0px rgba(0, 0, 0, 0.45);

    // General typography
    h1 {
      font-size: 1.5em;
      margin-bottom: 0.2em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      & small {
        color: var(--grey-3);
      }
    }

    // The UUID span
    span.uuid {
      color: var(--grey-3);
      margin-top: -0.5em;
      margin-bottom: 0.5em;
    }

    // Muted info spans that can be placed somewhere on dialogs
    span.info {
      color: var(--grey-3);
    }

    // The error span inside dialogs (inside the submit button group)
    span.error-info {
      color: var(--fg-error);
    }

    hr {
      border-bottom: 1px solid var(--grey-4);
      width: 80%;
    }

    // Why the .code-class? Because sometimes we have a small code area,
    // sometimes it's the only content of the dialog (in which case we
    // need to constrain its size in the geometry part)
    code,
    .code {
      border-radius: 2px;
      font-weight: bold;
      padding: 2px 5px;
    }

    // Forms

    label {
      margin-bottom: 0.2em;
      padding-bottom: 0;
      vertical-align: middle;
    }

    input {
      line-height: 150%;
      font-size: inherit;

      &.has-error {
        background-color: var(--bg-error) !important;
      }
    }

    input[type="text"],
    input[type="number"],
    button,
    a.button,
    textarea,
    select {
      background-color: var(--grey-0);
      line-height: 150%;
      border: none;
      border-radius: @border-radius;
      border-radius: @border-radius;
    }

    button,
    a.button {
      background-color: var(--grey-1);
      color: var(--grey-7);
      transition: 0.2s all ease;
      outline: 0;

      &:hover,
      &:focus {
        background-color: var(--c-primary);
        color: var(--bg-primary);
      }
    }

    // The wrapper for the preferences submit & cancel buttons
    .prefs-submit-group {
      clear: both;
    }

    .changelog {
      border: 1px solid var(--grey-4);
      border-radius: 2px;
    }

    // Positioning of the paper margin text elements
    div.paper {
      &.a4paper {
        border: 1px solid black;
      }

      .error {
        background-color: var(--bg-error);
        color: var(--fg-error);
        border: 1px solid var(--fg-error);
        border-radius: 5px;
      }
    }

    // Tabs styles
    .tab-list {
      border-bottom: 1px solid var(--grey-1);

      .tab-list-tab {
        border-radius: 0px;
        background-color: transparent;
        line-height: 200%;
        border-top-left-radius: @border-radius;
        border-top-right-radius: @border-radius;

        &.tab-list-tab-active {
          background-color: var(--c-primary);
          color: white;

          &:hover {
            color: black;
          }
        }

        &:hover {
          color: inherit;
          background-color: var(--grey-2);
        }
      }
    }

    // About dialog project boxes
    div.project-box {
      border-color: var(--grey-5);
      background-color: var(--grey-1);

      &:hover {
        background-color: var(--grey-2);
      }

      p.project-description {
        color: var(--grey-3);
      }
    }

    // Dictionary list styles
    ul.dicts-list {
      margin: 0px;
      border: 1px solid var(--grey-2);
      padding: 0;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;

      li.dicts-list-item {
        padding: 10px;
        font-weight: bold;
        margin: 0;
        background-color: white;
        border-bottom: 1px solid var(--grey-2);

        &:hover {
          background-color: var(--grey-0);
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    ul.user-dict {
      margin: 0px;
      border: 1px solid var(--grey-2);
      padding: 0;
      border-radius: 5px;

      li.user-dict-item {
        border-bottom: 1px solid var(--grey-2);

        clr-icon {
          color: var(--red-5);
        }

        &:hover {
          background-color: var(--red-0);
          color: white;
        }
      }
    }

    input.dicts-list-search {
      border: 1px solid var(--grey-2);
      background-color: white;
      border-bottom: none;
      font-size: inherit;
      display: block;
      margin: 0;
      padding: 10px;
      border-radius: 5px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
    }

    .selected-dict {
      color: white;
      cursor: pointer;
      background-color: var(--c-primary);
      border-radius: 5px;
      padding: 5px 10px;
      margin: 5px;
      border: 1px solid var(--c-primary-shade);

      &:after {
        content: "\00d7"; // &times;
        font-size: 150%;
        padding: 0px 5px;
        color: var(--c-primary-shade);
        line-height: 50%;
        vertical-align: baseline;
      }

      &:hover {
        background-color: darken(@c-primary, 10%);
        border-color: darken(@c-primary-shade, 10%);

        &:after {
          color: darken(@c-primary-shade, 10%);
        }
      }
    }

    // Tag cloud related stuff
    .tag {
      display: inline-block;
      background-color: lighten(@c-primary, 10%);
      font-weight: bold;
      cursor: pointer;
      border-radius: @border-radius;
      border-bottom: 3px solid var(--c-primary);
      border-right: 3px solid var(--c-primary);
      color: var(grey-8);
      padding: 5px;
      margin: 5px;
      transition: 0.1s all ease;

      &:hover {
        background-color: var(--c-primary);
        border-color: darken(@c-primary, 10%);
      }

      small {
        // <small>s are the tag count
        color: darken(@c-primary, 20%);
        margin-left: 5px;
      }
    }
  }

  // END .dialog
}

// END .modal
